/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeToTB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";
const storageColumns = [
	{
		title: "Earning Accounts",
		dataIndex: "earnings_acc",
		key: "earnings_acc",
		width: "20%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{earnings_acc}'
	},
	{
		title: "Signature Accounts",
		dataIndex: "signature_acc_num",
		key: "signature_acc_num",
		width: "10%",
		textWrap: "word-break",
		showType: "link",
		tpl: "/account/signaturer/{earnings_acc}"
	},
	{
		title: "Staking",
		dataIndex: "total_staking",
		key: "total_staking",
		width: "15%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Power",
		dataIndex: "total_power",
		key: "total_power",
		width: "11%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "power"
	},
	{
		title: "Power Ratio",
		dataIndex: "power_ratio",
		key: "power_ratio",
		width: "10%",
		textWrap: "word-break",
		render: (txt, record) => {
			return parseFloat((parseFloat(txt) * 100).toFixed(3)) + '%'
		}
	},
	{
		title: "Total Reward",
		dataIndex: "total_reward",
		key: "total_reward",
		width: "10%",
		showType: "balance-logo"
	}
];
const consensusColumns = [
	{
		title: "Accounts",
		dataIndex: "account",
		key: "account",
		width: "28%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{account}'
	},
	{
		title: "Total Staking",
		dataIndex: "total_staking",
		key: "total_staking",
		width: "15%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Self Staking",
		dataIndex: "self_staking",
		key: "self_staking",
		width: "10%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Nominators",
		dataIndex: "nominators_count",
		key: "nominators_count",
		width: "8%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "link",
		tpl: "/account/nominator/{account}",
	},
	{
		title: "Available Reward",
		dataIndex: "available_reward",
		key: "available_reward",
		width: "10%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Commission",
		dataIndex: "commission",
		width: "10%",
		render: (text, record, index) => {
			return parseFloat((parseFloat(record.commission)).toFixed(6)) + ' %';
		}
	},
	{
		title: "Status",
		dataIndex: "status",
		key: "status",
		width: "10%"
	},
];
const nominatorsColumns = [
	{
		title: "Accounts",
		dataIndex: "nominator_acc",
		key: "nominator_acc",
		width: "15%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{nominator_acc}'
	},
	{
		title: "Staking",
		dataIndex: "nominator_staking",
		key: "nominator_staking",
		width: "15%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Staking Account",
		dataIndex: "validator_acc",
		key: "validator_acc",
		width: "15%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{validator_acc}'
	},
	{
		title: "Available Reward",
		dataIndex: "nominator_reward",
		key: "nominator_reward",
		width: "15%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "balance-logo"
	},
	{
		title: "Status",
		dataIndex: "state",
		key: "state",
		width: "15%",
		render: () => {
			return 'Positive'
		}
	}
];
const totalObj = {
	storage: 0,
	consensus: 0,
	nominator: 0
};
let minerCount = 0;

const Main = ({ ...propsS }) => {
	const [props, setProps] = useState([]);
	const [totle, setTotle] = useState({
		storage: 0,
		consensus: 0,
		nominator: 0,
	});
	const { q } = useParams();
	let title = q == "storage" ? "Storage Miners" : q == "consensus" ? "Consensus Miners" : "Nominators";
	document.title = title + "-CESS Scan";

	const getMinerCount = async () => {
		let sminer = await api.total.sminer();
		minerCount = sminer.data;
	}

	useEffect(async () => {
		await getMinerCount();
		let types = ['storage', 'consensus', 'nominator'];
		let arr = [];
		for (let name of types) {
			let p = {
				name,
				border: true,
				size: "middle",
				pagesize: 10,
				cacheKey: "minerlist-" + name,
				loadList: {
					method: name == "storage" ? api.sminer.revenues : name == "consensus" ? api.consensu.list : api.account.nominators,
					cb: {
						total: (c) => {
							if (name == "storage") {
								c = minerCount;
							}
							totalObj[name] = c;
							setTimeout(function () {
								setTotle(totalObj);
							}, 100);
						}
					}
				},
				table: {
					columns: name == "storage" ? storageColumns : name == "consensus" ? consensusColumns : nominatorsColumns
				}
			};
			arr.push(p);
		}
		setProps(arr);
	}, []);



	useEffect(() => {
		common.showAPIUrl();
	}, []);


	return (
		<div className="containner-in">
			<SearchBar background={"#f4f4f4"} height="100px" />
			<div className="content">
				<div className="list">
					<div>
						<div className="o-title">
							<img src={process.env.PUBLIC_URL + "/img/" + q + ".png"} />
							{title}  ({totle[q].toLocaleString("zh", { style: "decimal" })})
						</div>
						<div className="pc-list">
							{
								props.map(t => {
									return <div className={t.name == q ? 'block' : 'none'} title={t.name} key={t.name}><ThTable props={t} /></div>
								})
							}
						</div>
						<div className="mobile-list">
							{
								props.map(t => {
									return <div className={t.name == q ? 'block' : 'none'} title={t.name} key={t.name}><MList props={t} /></div>
								})
							}
						</div>
					</div>
				</div>
			</div>
			<Footer />
		</div>
	);
};

function isEqual(prevProps, nextProps) {
	return _.isEqual(prevProps.data, nextProps.data);
}

export default React.memo(Main, isEqual);
